(function($){
    var _dialogBodyTmp = [
            '<div></div>',
        ].join(''),
        
        //TODO: $('<video controls width="860px" height="430px" autoplay poster="<%=o.poster%>" ><source src="<%=o.src%>" type="<%=o.type%>" /></video>')
        //将产生两次video src下载，why? 需要分析jQuery的$()源码实现.
        _videoTmp = [
            '<video controls width="860px" height="430px" autoplay poster="<%=o.poster%>" >',
                '<source src="<%=o.src%>" type="<%=o.type%>" />',
            '</video>',
        ].join(''),
        
        _loadErrorTmp = [
            '<div class="videoLoadErrorMsg">',
                'Load Video Failed, ',
                '<a target="_blank" href="<%=o.src%>">Click to download.</a>',
            '</div>'
        ].join(''),
        
        _defaultConfig = {};
        
    var _VideoPreviewDialog = function (config) {
        var _this = this;
        $.extend(this.config, _defaultConfig, config);  
        
        this.setProps({
            title : 'Video Play',
            toolbar : false,
            bodyStyle : 'hvBox',
            size : {
                width : 900,
                height : 550
            }
        });
        (function(){
            _this.addDialogContent(_dialogBodyTmp, function($dialogContent){  
                _this.showMask('loading');
                $dialogContent.get(0).innerHTML = tmpl(_videoTmp, _this.config['meta']);                
                var $video = $dialogContent.find('video');
                $video.on('canplay', function(){
                    _this.hideMask();
                });          
                $video.find('source').on('error', function(){
                    _this.hideMask();                    
                    _this.addDialogLayer( 'video_load_error', tmpl(_loadErrorTmp, _this.config['meta']), function($loadErrorMsg){});
                });
            });            
        }).defer(0);
    }.extend(ujs.ui.Dialog);
    
    //----------------------------------------------------------------------------------
    
    ujs.define('VideoPreviewDialog', 'ujs.subjects.dialog', function(){
        return _VideoPreviewDialog;
    });
    
})(jQuery);